import React, { Suspense } from "react";
import { BrowserRouter } from "react-router-dom";
import { useObservable } from "rxjs-hooks";
import { Routes, Route } from "react-router-dom";
import { ymEventServiceFactory } from "src/common/services/event";
import { ymUserServiceFactory } from "src/services/account/user";
import { globalConfigServiceFactory } from "src/services/global/config";
import { WatchUserActionServiceFactory } from "src/services/watch.user.action";
import { layoutControlServiceFactory } from "src/services/layout.control";

import { FixFooter } from "src/render/layout/components/fix.footer/fix.footer";
import { FixHeader } from "src/render/layout/components/fix.header/fix.header";

import Account from 'src/render/account';

import './style.scss';

//初始化全局通用事件监听中心
const ymevent = ymEventServiceFactory();

//初始化用户信息，向后台获取用户信息或者响应用户退出事件
const userService = ymUserServiceFactory();

globalConfigServiceFactory();

const watchUserActionService = WatchUserActionServiceFactory();

const layoutControlService = layoutControlServiceFactory();


const App = () => {

  const basename = '';
  const user = useObservable(() => userService.user$);
  const isHiddenDom = useObservable(() => watchUserActionService.isHiddenDom$);
  const isShowHeader = useObservable(() => layoutControlService.showHeader$);
  const isShowFooter = useObservable(() => layoutControlService.showFooter$);

  return (isHiddenDom === null || !isHiddenDom) ? 
  (
    <div className="market">
      <BrowserRouter>
      { !isShowHeader ? <FixHeader /> : null }
      <div className="market-content">
        <Suspense fallback={ null }>
          <Routes basename={ basename }>
            <Route path="/*" element={ null } />
            <Route path="/account/*" element={ <Account /> } />
          </Routes>
        </Suspense>
      </div>
      { !isShowFooter ? <FixFooter /> : null }
      </BrowserRouter>
    </div>
  )
  : null
};

export default App;